<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<jsp:include page="Redir.jsp"></jsp:include>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<link href="<c:url value='/css/default.css'/>" rel="stylesheet" type="text/css"/>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
   <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script type="text/javascript" src="jquery.validate.min.js"></script>
    <script src= "js/jquery.validate.min.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
   <script>
    $(function() {
        $( "#startdate.active" ).datepicker({
            minDate : "Now",
            changeMonth: true,
            dateFormat:"dd-M-yy",
            numberOfMonths: 1,
            onClose: function( selectedDate ) {
                $( "#enddate" ).datepicker( "option", "minDate", selectedDate );
            }
        });
        $( "#enddate.active" ).datepicker({
            defaultDate: "selectedDate",
            changeMonth: true,
            dateFormat:"dd-M-yy",
            numberOfMonths: 1,
            onClose: function( selectedDate ) {
                $( "#startdate" ).datepicker( selectedDate+1);
            }
        });
    });
    </script>
   <script type="text/javascript">
    $(function($,W,D)
    		{
    		    var JQUERY = {};

    		    JQUERY.UTIL =
    		    {
    		        setupFormValidation: function()
    		        {
    		        	
    		            //form validation rules
    		            $("#Holiday").validate({
    		                rules: {
    		                	 startdate:
    		                	 {
    		                	 required:true,
    		                	 //date:true
    		                	 },
    		                	 enddate:
    		                	 {
    		                	 required:true,
    		                	 //date:true
    		                	 },
    		                     description: "required"
    		                    		                   
    		                },
    		                messages: {
    		                    startdate: "Please enter Start Date",
    		                    enddate: "Please enter End Date",
    		                    description: "Please enter Description"
    		                },
    		                submitHandler: function(form) {
    		                    form.submit();
    		                }
    		            });
    		        }
    		    }

    		    //when the dom has loaded setup form validation rules document.createElement('script');
    		    //window.jQuery.fn.jquery------ $("#id").functionname(function(){........});
    		    $(D).ready(function($) {
    		        JQUERY.UTIL.setupFormValidation();
    		    });

    		})(jQuery, window, document);
    </script>

<fmt:setBundle basename="lang.message" />
<c:set var="i" value="insert"/>
<c:set var="e" value="edit"/>
<title><fmt:message key="showpublicholiday.title"/></title>
</head>
<body>
<%@include file="Header.jsp" %>
<div id="wrapper">	
    <div id="page-wrapper">
		<div id="page">
				<%@include file="Menu.jsp" %>   
			<div id="content">
			
<form action="ProcessPublicHoliday"  method=post  id ="Holiday">
	<h2><fmt:message key="publicholiday.add"/></h2>
<table class="table-form">	
<tr>
		
					<td><fmt:message key="label.publicholiday.startdate" /></td>
					<td>
					<fmt:formatDate value="${publicholidays.startdate}" pattern="dd-MMM-yyyy" var="fDate" />
					<input type="text" id ="startdate" name="startdate" value="${fDate}"
						size="15" maxlength="20" class="${action == 'edit' ? 'inactive' : 'active' }"
						readonly="readonly" /> <input
						type="hidden" name="action" value="${action}" /></td>
				</tr>
		<tr>
		
					<td><fmt:message key="label.publicholiday.enddate" /></td>
					<td>
					<fmt:formatDate value="${publicholidays.startdate}" pattern="dd-MMM-yyyy" var="sDate" />
					<input type="text" id ="enddate" name="enddate" value="${sDate}"
				size="15" maxlength="20" class="${action == 'edit' ? 'inactive' : 'active' }"
						readonly="readonly" /> <input
						type="hidden" name="action" value="${action}" /></td>
				</tr>
					<tr>
					<td><fmt:message key="label.publicholiday.description" /></td>
					<td><input type="text" name="description" value="${publicholidays.description}"
						size=15 maxlength=20></td>
				</tr>
				

</table>
<input type="submit" value="Submit" class="button-style">
<input type="reset" value="Reset" class="button-style-cancel">
</form>
</div>


	</div>
</div>
</div>
<%@include file="Footer.jsp" %>
</body>
</html>